<script lang="ts" setup>
import { ref, h, reactive, onMounted, onBeforeMount } from "vue";
import { ReVxeGrid } from "@/components/ReVxeTable";
import { VxeGridPropTypes, VxeUI } from "vxe-table";
import { VxeFormProps, VxeButton, VxeSwitch, VxeImage } from "vxe-pc-ui";
import { ElMessage } from "element-plus";
import addModal from "./components/addModal.vue";
import execptionModal from "./components/execptionModal.vue";

import {
  exceptionList,
  taxSourcesList,
  earlyWarnRiskType,
  listMerchantName,
  typeWarnExceptionList,
  WarnState,
  exceptionDel
} from "@/api/warning/warning";
const reVxeGridRef = ref();
onMounted(() => {
  getmerchant();
  getException();
});
// 商户列表
const merchantList = ref<any[]>();
const getmerchant = () => {
  listMerchantName().then((res: any) => {
    merchantList.value = res?.data?.rows;
  });
};
// 异常类型
const ExceptionList = ref<any[]>();
const getException = () => {
  typeWarnExceptionList().then((res: any) => {
    ExceptionList.value = res?.data;
  });
};

const columns: VxeGridPropTypes.Columns<any> = [
  // { type: "checkbox", title: "", width: 60, align: "center" },
  {
    title: "异常类型",
    field: "typeDisplay",
    align: "center",
    minWidth: 100
  },
  {
    title: "触发规则",
    field: "triggerRuleKeyDisplay",
    align: "center",
    minWidth: 100
  },
  {
    title: "异常范围",
    field: "exceptionRangeDisplay",
    align: "center",
    minWidth: 80
  },
  {
    title: "处理方式",
    field: "handleModeDisplay",
    align: "center",
    minWidth: 80
  },
  {
    title: "备注",
    field: "remark",
    align: "center",
    minWidth: 100
  },
  {
    title: "创建时间",
    field: "createTime",
    align: "center",
    minWidth: 100
  },
  {
    title: "启用",
    field: "status",
    align: "center",
    minWidth: 100,
    slots: {
      default: ({ row }) => {
        return h(VxeSwitch, {
          size: "mini",
          openValue: 0,
          readonly: true,
          modelValue: row.status,
          closeValue: 1,
          async onChange(res: any) {
            const type = await VxeUI.modal.confirm("确认修改状态？");
            if (type == "confirm") {
              changeStateswitch({ id: row.id, status: res.value });
            }
          }
        });
      }
    }
  },
  {
    title: "操作",
    field: "operate",
    align: "center",
    fixed: `right`,
    minWidth: 100,
    slots: {
      default: ({ row }) => {
        return [
          h(VxeButton, {
            status: "primary",
            mode: "text",
            size: "mini",
            content: "修改",
            disabled: row.status == 0 ? true : false,
            onClick() {
              handleEdit(row)
            }
          }),
          h(VxeButton, {
            status: "primary",
            mode: "text",
            size: "mini",
            disabled: row.status == 0 ? true : false,
            content: "删除",
            onClick() {
              handleDelete(row)
            }
          })
        ]
      }
    }
  }
];
const changeStateswitch = (params: any) => {
  WarnState(params).then(res => {
    handleSearch();
  })
}
// 筛选相关
const formRef = ref();
interface FormDataVO {
  merchantsInfoId: string | number;
  warnType: string | number; // 状态
  createTimeStart: number | string; //开始日期
  createTimeEnd: number | string; //结束日期
  timeRang: string[]; //日期数组
}
const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    timeRang: [],
    createTimeStart: "",
    createTimeEnd: "",
    merchantsInfoId: "",
    warnType: ""
  },
  items: [
    {
      field: "merchantsInfoId",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "merchantsInfoId" }
    },
    {
      field: "warnType",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "warnType" }
    },
    {
      field: "timeRang",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "timeRang" }
    },
    { align: "left", span: 4, slots: { default: "active" } }
  ]
});
// 重置内容
const handleInitialFormParams = () => {
  formOptions.data = <FormDataVO>{
    taxSourcesId: "",
    riskType: "",
    proofState: "",
    timeRang: [],
    createTimeStart: "",
    createTimeEnd: "",
    merchantsInfoId: "",
    warnType: ""
  };
};
const handleSearch = () => {
  if (formOptions.data?.timeRang?.length) {
    formOptions.data.createTimeStart = formOptions.data.timeRang[0];
    formOptions.data.createTimeStart = formOptions.data.timeRang[1];
  } else {
    formOptions.data.createTimeStart = "";
    formOptions.data.createTimeStart = "";
  }
  reVxeGridRef.value.loadData();
};
const handleReset = async () => {
  await handleInitialFormParams();
  reVxeGridRef.value.loadData("reset");
};

const addModalRef = ref();
const execptionModalRef = ref();
const handleAdd = () => {
  execptionModalRef.value.showAddModal();
};
const handleEdit = (record: Recordable) => {
  execptionModalRef.value.showEditModal(record);
};
const handleDelete = async (record: Recordable) => {
  const type = await VxeUI.modal.confirm("您确定要删除吗？");
  if (type == "confirm") {
    exceptionDel(record.id).then(() => {
      handleSearch();
    });
  }
};

const handleView = (record: Recordable) => {};
const functions: Record<string, string> = {
  add: "platform.client.index.add",
  edit: "platform.client.index.edit",
  view: "platform.client.index.view",
  delete: "platform.client.index.delete"
};
</script>
<template>
  <div>
    <el-card :shadow="`never`" class="table-card">
      <vxe-form ref="formRef" v-bind="formOptions">
        <template #merchantsInfoId="{ data }">
          <el-select
            clearable
            filterable
            placeholder="请选择商户"
            v-model="data.merchantsInfoId"
          >
            <el-option
              v-for="(item, index) in merchantList"
              :key="index"
              :label="item.merchantsName"
              :value="item.id"
            ></el-option>
          </el-select>
        </template>
        <template #warnType="{ data }">
          <el-select
            clearable
            placeholder="请选择异常类型"
            v-model="data.warnType"
          >
            <el-option
              v-for="(item, index) in ExceptionList"
              :key="index"
              :label="item.desc"
              :value="item.code"
            ></el-option>
          </el-select>
        </template>
        <template #timeRang="{ data }">
          <el-date-picker
            clearable
            style="width: 100%"
            v-model="data.timeRang"
            type="daterange"
            range-separator="-"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </template>
        <template #active>
          <el-button @click="handleReset" native-type="reset">重置</el-button>
          <el-button @click="handleSearch" native-type="submit" type="primary"
            >提交</el-button
          >
        </template>
      </vxe-form>
      <div class="mt-3">
        <el-button @click="handleAdd" type="primary">新增异常</el-button>
      </div>
    </el-card>
    <el-card :shadow="`never`" class="table-card">
      <ReVxeGrid
        ref="reVxeGridRef"
        :request="exceptionList"
        :functions="functions"
        :searchParams="formOptions.data"
        :columns="columns"
        :action="false"
        @handleAdd="handleAdd"
        @handleView="handleView"
        @handleDelete="handleDelete"
      />
    </el-card>
    <addModal ref="addModalRef" @reload="handleSearch" />
    <execptionModal ref="execptionModalRef"  @reload="handleSearch"></execptionModal>
  </div>
</template>
<style>
.form_header {
  font-size: 15px;
  color: #6379bb;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}
.left-title {
  font-weight: 700;
  font-family: 微软雅黑;
  font-size: 14px;
  width: 85px;
  text-align: right;
}
.right-text {
  font-size: 14px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #eee;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: #eee;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
}
.e_footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
}
.line {
  width: 1px;
  height: 100px;
  border: 1px solid #ededed;
}
</style>
